<template>
	<div class="taskfile page-main">
		<view class="title">
			<i class="fl goback el-icon-arrow-left" @click="goBack"></i><span class="fr rules" @click="ruleBtn"></span>
			<view class="tasktitle">
				<view class="taskname">{{info.taskName ? info.taskName : ''}}</view>
				<view class="name">Reward Tasks</view>
			</view>
		</view>
	  
		<div class="upload">
			<el-upload
			    :file-list="fileList"
			    action="https://jsonplaceholder.typicode.com/posts/"
			    list-type="picture-card"
				:before-remove="beforeRemove"
			    :on-remove="handleRemove"
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload"
				:limit="info.pictureNum"
				:http-request="
				  (file) => {
				    return handleFileChange(file)
				  }
				"
				:class="fileList.length < info.pictureNum ? '' : 'exceed'"
			  >
			    <i class="el-icon-plus"></i>
			  </el-upload>
				<view class="tips" v-if="info.authStatus === 5">failure reason : {{info.resultRemark}}</view>
			<el-button class="upload-btn" type="primary" @click="uploadTask">Upload</el-button>
		</div>
		
		<div class="bottom-bg"></div>
		
		<view class="rulebox" v-if="ruleDialog">
		  <view class="jyslistin">
		    <!-- <img class="jystop" src="@/static/images/jys01.png" alt="" />
		    <img class="jystop jystopbg" src="@/static/images/jys02.png" alt="" /> -->
			<el-scrollbar style="max-height: 500rpx;">
				<div class="rule-content">
					{{ prompt }}
				</div>
				<view class="idoit" @click="goBack"><view class="mask"></view>I got it</view>
			</el-scrollbar>
		    <i class="closebtn el-icon-circle-close" @click="goBack"></i>
		  </view>
		</view>
		
		<popup v-if="popupDialog" :isScrollbar="true" :prompt="popupText" @popup-event="popupEvent"></popup>
		
	</div>
</template>

<script>
import authMixin from '@/mixins/auth'
import popup from '@/components/popup/index.vue'
import Header from '../auth/Header/index.vue'
import { imgCompress } from '@/utils/index'
import { AwsUpdate } from '@/utils/aws'
import { getToken } from '../../utils/auth';
import generateID from '@/utils/generateID'

export default {
	mixins: [authMixin],
	components: {
		Header,
		popup
	},
    data() {
		return {
			dialogImageUrl: '',
			dialogVisible: false,
			s3: null,
			stsToken: null,
			fileList: [],
			taskId: '',
			taskName: '',
			ruleDialog: false,
			prompt: '',
			
			popupDialog: false,
			popupText: '',
			
			info: {}
		};
    },
	onLoad(option) {
		console.log(option)
		this.taskId = option.taskId
		this.taskName = option.taskName
	},
    methods: {
		popupEvent() {
			this.popupDialog = false
		},
		beforeRemove(file, fileList) {
			const index = fileList.findIndex(item => JSON.stringify(item) === JSON.stringify(file));
			this.fileList.splice(index, 1)
		},
      handleRemove(file, fileList) {
		// const index = fileList.findIndex(item => item.url === file.url)
		// console.log(index)
		// fileList.forEach((item, index) => {
		// 	if(item.url === file.url) {
		// 		this.fileIndex = index
		// 	}
		// })
		// console.log(this.fileIndex)
		console.log(fileList)
        // console.log(file, fileList);
      },
	  handleAvatarSuccess(res, file) {
	    this.imageUrl = URL.createObjectURL(file.raw)
	  },
	  beforeAvatarUpload(file) {
		  if(file.size > 1024 * 1024 * 10) {
			this.$message.error('Uploading photos should be less than 10 MB.')
			return false
		}
	  },
	  async getSTSToken() {
	    let params = {
	      token: getToken()
	    }
	    const { code, data } = await this.$api.kyc.getSTSToken(params)
	    if (code == 200) {
	      this.stsToken = data
	      this.s3 = new AWS.S3({
	        accessKeyId: data.accessKeyId,
	        secretAccessKey: data.secretKey,
	        region: data.region
	      })
	    }
	  },
	  // upload Img
	  async handleFileChange(e) {
	    // const file = e.file
		
	    if (e.file.size > 1024 * 1024 * 3) {
	      imgCompress(e.file).then(async (file) => {
	        const data = await AwsUpdate(file, this.stsToken)
			this.fileList.push({
				uid: generateID(),
				name: '',
				url: data.Location
			})
	      })
	    } else {
			const data = await AwsUpdate(e.file, this.stsToken)
			this.fileList.push({
				uid: generateID(),
				name: '',
				url: data.Location
			})
	    }
	    // item.isChange = true
	  },
	  async uploadTask() {
		  console.log(this.info.pictureNum, this.fileList)
		  if(this.fileList && this.fileList.length <= 0) {
			  this.$message.error('Please upload pictures')
			  return false
		  }
			if(this.taskId && this.taskId !== '') {
				let filesUrl = []
				if(this.fileList && this.fileList.length > 0) {
					this.fileList.forEach(item => {
						console.log(this.fileList)
						const match = item.url.match(/(?<=\/kyc\/).*/);
						filesUrl.push('kyc/'+match[0])
					})
				}
				let params = {
					  token: getToken(),
					  taskId: this.taskId,
					  pictureList: JSON.stringify(filesUrl)
				}
				const {code, data} = await this.$api.task.uploadMyTask(params)
				if(code === 200) {
					this.prompt = 'Upload successful, rewards will be issued after approval!'
				} else {
					this.prompt = 'Upload failed.'
				}
				this.ruleDialog = true
			}else {
				this.$message.error('Task is Null')
			}
	  },
	  goBack() {
		  this.ruleDialog = false
		  this.$router.push('/pages/task/index')
	  },
	  ruleBtn() {
		  this.popupDialog = true
	  },
	  // get task detail
	  async getCustomerTaskDetail() {
		  let params = {
			  token: getToken(),
			  taskId: this.taskId
		  }
		  const {code, data} = await this.$api.task.getCustomerTaskDetail(params)
		  console.log(code, data)
		  if(code === 200) {
			  let fileList = []
			  this.info = data
			  this.popupText = data.taskRules
			  if(data.pictureList && data.pictureList.length > 0) {
					data.pictureList.forEach(item => {
						const url = decodeURIComponent(item.pictureUrl).replace(/kyc\/\//g, 'kyc/')
						fileList.push({
							uid: generateID(),
							name: item.pictureUri,
							url: url.split('?')[0]
						})
					})
					this.fileList = fileList
					
			  }
		  }
	  }
    },
	mounted() {
		this.getSTSToken()
		this.getCustomerTaskDetail()
	}
}
</script>

<style lang="scss">
.taskfile {
	padding:0;
	position: relative;
	height: 100%;
	background:#0A0619 url('@/static/images/task/task-file-bg-top.png') no-repeat;
	background-size:100%;
	z-index: 1;
	.title {
		position: relative;
		color: #333;
		// font: 500 36rpx/145rpx 'Microsoft Yahei';
		.goback {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			font-size: 48rpx;
			color: #fff;
		}
		// .name {
		// 	display: inline-block;
		// 	width: 75%;
		// 	line-height: 36rpx;
		// }
		.tasktitle {
			display: block;
			padding: 150rpx 30rpx 30rpx;
			.taskname {
				// transform: scaleX(-1) scaleY(-1);
				display: inline-block;
				height: 48rpx;
				padding: 0 20rpx;
				font: 500 28rpx/48rpx 'DingTalk';
				background-image: linear-gradient(90deg, #2FF6B7 0%, #FFFFA9 97%);
				border-radius: 32rpx 32rpx 32rpx 0;
			}
			.name{
				font: 500 80rpx/100rpx DingTalk-JinBuTi;
				color: #fff;
				// padding: 85rpx 0;
				display: block;
			}
		}
		.rules {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			border-radius: 53rpx;
			background: url('@/static/images/task/rule-ico.png') no-repeat center center;
			background-size: 48rpx 48rpx;
		}
	}
	.bottom-bg {
		position: absolute;
		bottom: 0;
		z-index: 2;
		width: 750rpx;
		height: 556rpx;
		background: url('@/static/images/task/task-file-bg-bottom.png') no-repeat;
		background-size: 100%;
	}
	.upload {
		position: relative;
		z-index: 3;
		min-height: 800rpx;
		padding-bottom: 30rpx;
		margin: 0 40rpx;
		border: 1px solid #ffffff66;
		border-radius: 20rpx;
		background-color: #2E3257;
		.tips {
			text-align: center;
			font-size: 24rpx;
			color: #B5B5B6;
		}
	}
	.upload > div {
		padding: 24rpx 12rpx 0;
		// display: flex;
		flex-wrap: wrap;
		
		.el-upload {
			width: calc(50% - 10px);
		}
	}
	/deep/ .upload {
		.exceed {
			.el-upload {
				display: none;
			}
		}
		.upload-btn {
			position: absolute;
			bottom: 30rpx;
			width: 90%;
			margin: 30rpx 5% 0;
			border-radius: 50rpx;
		}
		.el-upload--picture-card {
			margin-left: 16rpx;
		}
	}
	/deep/ .el-upload-list--picture-card {
		.el-upload-list__item {
			width: calc(50% - 28rpx);
			margin: 0 14rpx 30rpx;
			// &:nth-child(2n) {
			// 	float: right;
			// }
			&.is-success {
				.el-upload-list__item-status-label {
					display: none;
				}
				
			}
		}
		.el-upload-list__item-actions {
			opacity: 1;
			background-color: rgba(0,0,0,.1);
			span {
				display: inline-block !important;
			}
			.el-upload-list__item-delete {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 0 !important;
				right: 0 !important;
				background: #000 url('../../static/images/task/task-file-delete-icon.png') no-repeat center center;
				background-size: 24rpx 24rpx;
				.el-icon-delete {
					&::before {
						content: '';
					}
				}
			}
		}
	}
	
	.rulebox {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  z-index: 1000;
	  text-align: center;
	  .jyslistin {
	    position: relative;
	    padding: 90rpx 40rpx 48rpx;
	    border-radius: 40rpx;
		color: #fff;
	    background: #0a0619 url('../../static/images/task/task-file-rule-bg.png') no-repeat;
		background-size: 654rpx 760rpx;
	    width: 60%;
	    margin: 300rpx auto 0;
		.rule-content {
			font: 500 28rpx/48rpx 'PingFangSC';
		}
		.idoit {
			position: relative;
			width: 230rpx;
			height: 72rpx;
			margin: 30rpx auto 0;
			line-height: 72rpx;
			text-align: center;
			background-image: linear-gradient(-84deg, #0D00B1 0%, #6D50DF 98%);
			border: 1px solid #FFFFFF;
			border-radius: 36rpx;
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 214rpx;
				height: 44rpx;
				opacity: 0.5;
				background-image: linear-gradient(0deg, #ffffff00 50%, #ffffff63 100%);
				border-radius: 32rpx;
				filter: blur(2px);
			}
		}
	    .jystop {
	      width: 160rpx;
	      height: 160rpx;
	      position: absolute;
	      top: -80rpx;
	      left: 50%;
	      transform: translateX(-50%);
	      z-index: 3;
	    }
	    .jystopbg {
	      width: 220rpx;
	      height: 240rpx;
	      top: -120rpx;
	      z-index: 2;
	    }
	    h3 {
	      font-size: 32rpx;
	      font-weight: bold;
	      margin-bottom: 20rpx;
	    }
	    .jysimg {
	      width: 100%;
	    }
	    .confirmbtn {
	      width: 90%;
	      margin: 40rpx auto 0;
	
	      .el-button {
	        font-size: 28rpx;
	      }
	    }
	  }
	  .closebtn {
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    bottom: -80rpx;
	    color: #ccc;
	    font-size: 48rpx;
	  }
	  // &::after {
	  //   content: '';
	  //   position: absolute;
	  //   height: 50rpx;
	  //   width: 2px;
	  //   background: #aaa;
	  //   left: 50%;
	  //   transform: translateX(-50%);
	  // }
	}
}
</style>
